<div class="init-width">
    <div class="content-wrapper">
        <div class="title-info">
            <h4 class="app-title">{{$t('nav.room')}}</h4>
            <i @click.stop="showAdd($event)" class="icon-plus right-top"></i>
        </div>
        {{list}}
        <div class="content-info flex-wrapper no-padding-bottom no-search">
            <div v-if="roomList.length > 1" class="room-wrapper">
                <mt-navbar v-model="active">
                    <mt-tab-item v-for="item in roomList" :id="item.roomKey">{{item.name}}</mt-tab-item>
                </mt-navbar>
                <mt-tab-container swipeable="true" v-model="active">
                    <mt-tab-container-item v-for="item in roomList"  :id="item.roomKey">
                        <div @click="roomItem(item, isShow(item.macs))" v-show="item.roomKey != 'create'"
                             class="room-info flex">
                            <div class="room-info-image">
                                <img :src="'images/' + item.url">
                            </div>
                            <div class="room-info-content flex-1">
                                <div class="room-title flex-1 flex flex-ac flex-jcb">
                                    <span>{{item.name}}</span><span @click.stop="showOperate(item)" class="icon-more"></span>
                                </div>
                                <div class="room-desc">{{$t('roomDevice')}}:&ensp;<span>
                                    {{getDeviceList(item.macs).length}}</span></div>
                                <div v-show="isShow(item.macs)" class="room-info-btn flex flex-jcb">
                                    <button :class="{'active': !getStatusByRoom(item.macs)}"
                                            @click.stop="operateClose(item.macs, 0, item.roomKey, $event)">OFF</button>
                                    <button :class="{'active': getStatusByRoom(item.macs)}"
                                            @click.stop="operateClose(item.macs, 1, item.roomKey, $event)">ON</button>
                                </div>
                            </div>
                        </div>
                        <div v-show="item.roomKey != 'create'" class="room-device">
                            <div class="overflow-touch">
                                <div v-for="device in getDeviceList(item.macs)" :id="device.mac" :key="device.mac"
                                     @click="operateItem(device)" class="item item-device">
                                    <div class="item-icon-circle">
                                        <i :class="getIcon(device.tid)"
                                           :style="{'color': getColor(device.characteristics, device.tid)}"></i>
                                    </div>
                                    <div class="item-name">
                                        <span>{{getPosition(device.position)}}</span>
                                        <span v-show="!showDesc(device.name)">{{device.mac}}</span>
                                        <span v-show="showDesc(device.name)"  :class="{'desc': showDesc(device.position)}">
                                            {{device.name}}
                                            <span v-show="showDesc(device.position)">({{device.version}})</span>
                                        </span>
                                        <span class="desc" v-show="!showDesc(device.position)">{{device.version}} </span>
                                    </div>
                                    <div class="item-power">
                                        <div v-show="isLigth(device.tid)" class="switch-wrapper">
                                            <span :class="{'active': !getStatus(device.characteristics)}"
                                                  @click.self.stop="close([device.mac], 0, null, $event, false)">OFF</span>
                                            <span :class="{'active': getStatus(device.characteristics)}"
                                                  @click.self.stop="close([device.mac], 1, null, $event, false)">ON</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-show="item.roomKey == 'create'" class="add-wrapper">
                            <div class="add-icon-wrapper">
                                <img class="add-image" src="images/no_room.png"/>
                            </div>
                            <div class="add-title">{{$t('noAddRoomDesc')}}</div>
                            <div class="add-desc">{{$t('listDesc')}}</div>
                            <div  class="add-plus" @click="showAdd($event)">
                                {{$t('addRoom')}}
                            </div>
                        </div>
                    </mt-tab-container-item>
                </mt-tab-container>
            </div>
            <div v-else class="add-wrapper">
                <div class="add-icon-wrapper">
                    <img class="add-image" src="images/no_room.png"/>
                </div>
                <div class="add-title">{{$t('noAddRoomDesc')}}</div>
                <div class="add-desc">{{$t('listDesc')}}</div>
                <div  class="add-plus" @click="showAdd($event)">
                    {{$t('addRoom')}}
                </div>
            </div>
        </div>
        {{getList}}
        <v-footer :current="room"></v-footer>
    </div>
    <transition name="ups">
        <div v-show="infoShow" class="operate-wrapper">
            <div @click="hideOperate" class="mask"></div>
            <div class="operate-info">
                <ul v-if="roomInfo">
                    <li class="name">
                        <span class="title flex flex-ac"><img :src="'images/' + roomInfo.url">{{roomInfo.name}}</span>
                        <div class="desc">
                            <div v-show="isShow(roomInfo.macs)" class="switch-wrapper">
                                <span :class="{'active': !getStatusByRoom(roomInfo.macs)}"
                                      @click="operateClose(roomInfo.macs, 0, roomInfo.roomKey, $event)">OFF</span>
                                <span :class="{'active': getStatusByRoom(roomInfo.macs)}"
                                      @click="operateClose(roomInfo.macs, 1, roomInfo.roomKey, $event)">ON</span>
                            </div>
                        </div>
                    </li>
                    <li @click="editName"><span>{{$t('editName')}}</span></li>
                    <li @click="editRoom"><span>{{$t('editRoom')}}</span></li>
                    <li @click="delRoom"><span class="icon-orange">{{$t('deleteBtn')}}</span></li>
                    <li @click="hideOperate" class="margin-top-15 no-border"><span>{{$t('cancelBtn')}}</span></li>
                </ul>
            </div>
        </div>
    </transition>

    <v-addRoom v-on:addRoomShow="onBackRoom" :roomExistKeys="roomExistKeys" :roomInfo="roomInfo" ref="addRoom"></v-addRoom>
    <v-operateDevice v-on:operateShow="onBackRoom" :isDevice="isDevice" :isRoom="isRoom" :colorId="colorId"
                     :temperatureId="temperatureId"
                     ref="operate"></v-operateDevice>
</div>
